<div class="esriFontAlignment">
  <div class="top">
    <button class="icon" value="top,left" data-dojo-attach-event="onClick:changeValue"><div class="top-left"></div></button>
    <button class="icon" value="top,center" data-dojo-attach-event="onClick:changeValue"><div class="top-mid"></button>
    <button class="icon" value="top,right" data-dojo-attach-event="onClick:changeValue"><div class="top-right"></button>
  </div>
  <div class="mid">
    <button class="icon" value="middle,left" data-dojo-attach-event="onClick:changeValue"><div class="mid-left"></button>
    <button class="icon" value="middle,center" data-dojo-attach-event="onClick:changeValue"><div class="mid-mid"></button>
    <button class="icon" value="middle,right" data-dojo-attach-event="onClick:changeValue"><div class="mid-right"></button>
  </div>
  <div class="bot">
    <button class="icon" value="baseline,left" data-dojo-attach-event="onClick:changeValue"><div class="bot-left"></button>
    <button class="icon" value="baseline,center" data-dojo-attach-event="onClick:changeValue"><div class="bot-mid"></button>
    <button class="icon" value="baseline,right" data-dojo-attach-event="onClick:changeValue"><div class="bot-right"></button>
  </div>
</div>